<template>
  <div class="workflow-detail-container">
    <div class="header">
      <h2>流程详情</h2>
      <el-button @click="goBack">返回</el-button>
    </div>
    
    <el-card v-loading="loading">
      <el-descriptions title="基本信息" :column="3" border v-if="workflow">
        <el-descriptions-item label="流程ID">{{ workflow.id }}</el-descriptions-item>
        <el-descriptions-item label="流程类型">{{ workflow.type }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(workflow.status)">{{ workflow.status }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="发起人">{{ workflow.initiator }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ formatDate(workflow.created_at) }}</el-descriptions-item>
        <el-descriptions-item label="最后更新">{{ formatDate(workflow.updated_at) }}</el-descriptions-item>
        <el-descriptions-item label="模板ID" v-if="workflow.template_id">{{ workflow.template_id }}</el-descriptions-item>
      </el-descriptions>
      
      <!-- 流程图可视化部分 -->
      <div class="bpmn-container" v-if="workflow && workflow.template_id">
        <h3>流程图</h3>
        <BpmnViewer :xml="bpmnXml" />
      </div>
      
      <h3 class="tasks-title">任务列表</h3>
      <el-table :data="tasks" style="width: 100%">
        <el-table-column prop="id" label="任务ID" width="80" />
        <el-table-column prop="task_name" label="任务名称" width="150" />
        <el-table-column prop="assignee" label="处理人" width="120" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间">
          <template #default="scope">
            {{ formatDate(scope.row.created_at) }}
          </template>
        </el-table-column>
        <el-table-column prop="completed_at" label="完成时间">
          <template #default="scope">
            {{ formatDate(scope.row.completed_at) }}
          </template>
        </el-table-column>
      </el-table>
      
      <h3 class="history-title">审批历史</h3>
      <el-timeline>
        <el-timeline-item
          v-for="(history, index) in workflowHistory"
          :key="index"
          :type="getHistoryType(history.action)"
          :timestamp="formatDate(history.timestamp)"
        >
          <div class="timeline-content">
            <strong>{{ history.activity_name }}</strong>
            <div class="timeline-user">操作人: {{ history.user }}</div>
            <div class="timeline-action">操作: {{ getActionText(history.action) }}</div>
            <div v-if="history.comment" class="timeline-comment">
              <el-divider content-position="left">审批意见</el-divider>
              {{ history.comment }}
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import axios from 'axios';
// 引入BPMN查看器
import BpmnViewer from '@/components/BpmnViewer.vue';
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';

const route = useRoute();
const router = useRouter();
const workflow = ref(null);
const tasks = ref([]);
const workflowHistory = ref([]);
const loading = ref(false);
const bpmnXml = ref('');

const getStatusType = (status) => {
  const types = {
    'pending': 'warning',
    'completed': 'success',
    'rejected': 'danger'
  };
  return types[status] || 'info';
};

const getHistoryType = (action) => {
  const types = {
    'complete': 'success',
    'claim': 'primary',
    'reject': 'danger'
  };
  return types[action] || 'info';
};

const getActionText = (action) => {
  const texts = {
    'complete': '完成',
    'claim': '认领',
    'reject': '拒绝'
  };
  return texts[action] || action;
};

const formatDate = (dateString) => {
  if (!dateString) return '-';
  const date = new Date(dateString);
  return date.toLocaleString();
};

const fetchWorkflowDetail = async () => {
  loading.value = true;
  try {
    const workflowId = route.params.id;
    const [workflowRes, tasksRes, bpmnRes] = await Promise.all([
      axios.get(`/workflow/${workflowId}`),
      axios.get(`/workflow/${workflowId}/tasks`),
      axios.get(`/workflow/${workflowId}/bpmn`)
    ]);
    workflow.value = workflowRes.data;
    tasks.value = tasksRes.data;
    bpmnXml.value = bpmnRes.data;
    
    // 获取流程历史
    await fetchWorkflowHistory(workflowId);
  } catch (error) {
    ElMessage.error('获取流程详情失败');
    console.error(error);
  } finally {
    loading.value = false;
  }
};

const fetchWorkflowHistory = async (workflowId) => {
  try {
    const response = await axios.get(`/workflow/${workflowId}/history`);
    workflowHistory.value = response.data || [];
  } catch (error) {
    console.error('获取流程历史失败:', error);
  }
};

const goBack = () => {
  router.push('/workflows');
};

onMounted(() => {
  fetchWorkflowDetail();
});
</script>

<style scoped>
.workflow-detail-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.tasks-title, .history-title {
  margin-top: 30px;
  margin-bottom: 15px;
}

.bpmn-container {
  margin-top: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 20px;
}

.viewer {
  height: 500px;
  width: 100%;
}

.timeline-content {
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.timeline-user, .timeline-action {
  font-size: 14px;
  color: #606266;
  margin: 5px 0;
}

.timeline-comment {
  margin-top: 10px;
  color: #606266;
  white-space: pre-line;
}

/* BPMN高亮样式 */
:deep(.completed) {
  stroke: #67C23A !important;
  fill: #f0f9eb !important;
}

:deep(.current) {
  stroke: #409EFF !important;
  fill: #ecf5ff !important;
  stroke-width: 2px !important;
}
</style> 